.container {
    position: relative;
    height: 100%;
    background: #93baff url(./images/container.jpg) no-repeat left top / 100%;
    overflow: hidden;
}
// 人
.man {
    position: absolute;
    top: 300px;
    left: calc(50% + 300px);
    width: 278px;
    height: 210px;
    background: url(./images/man.png) no-repeat left top / 100%;
    offset-path: path("M10 10 Q 20 60 80 60");
    offset-rotate: 0deg;
    animation: man_move 5000ms infinite alternate ease-in-out;
    z-index: 2;
}
@keyframes man_move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
// 雪花
@function random_range($min, $max) {
    @return calc($min + floor(random() * ($max - $min) * 1000) / 1000);
}
.snow_list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.snow {
    position: absolute;
    top: 0%;
    width: 15px;
    height: 15px;
    background: white;
    filter: blur(2px);
    border-radius: 50%;
    transform-origin: center;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;

    // 分成10组
    @for $i from 1 through 10 {
        &:nth-child(10n + #{$i}) {
            animation-duration: random_range(10, 20) * 1s;
            left: $i * 9%;
        }
    }
    &:nth-child(9n),
    &:nth-child(8n) {
        width: 60px;
        height: 60px;
        filter: none;
        background: url(./images/snow_flake.png) no-repeat center / 100%;
    }
}
// 分成10组
@for $i from 1 through 10 {
    // 反转
    $yoyo: random_range(0.3, 0.8);
    // x轴位移
    $x-offset: random_range(-10, 10) * 1vw;
    $x-start: random_range(-10, 10) * 1vw;
    $x-yoyo: $x-start + $x-offset;
    $x-end: calc($x-start + ($x-offset / 2));
    // 旋转
    $rotate: random_range(-4, 4) * 360deg;
    // 缩放
    $scale: random_range(0.5, 1);

    .snow_animation#{$i} {
        animation-delay: random_range(0, 20) * -1s;
        transform: translate($x-start, -100%) scale($scale) rotate(0);
        animation-name: fall-#{$i} !important;
    }
    @keyframes fall-#{$i} {
        #{percentage($yoyo)} {
            top: $yoyo * 100%;
            transform: translate($x-yoyo, 0%) scale($scale) rotate($yoyo * $rotate);
        }
        to {
            top: 100%;
            transform: translate($x-end, 0%) scale($scale) rotate($rotate);
        }
    }
}
